<template>
    <div class="page-main">
        <el-menu
            class="page-main-left-tabs"
            ref="moudle"
            style="width: 201px"
            router
            :default-active="activeName"
        >
            <el-submenu
                :index="'submenu' + index"
                v-for="(item, index) in menuList"
                :key="index"
            >
                <template slot="title">
                    <i
                        class="page-main-left-tab-in-icon"
                        :class="item.icon"
                    ></i>
                    {{ item.menuName }}
                </template>
                <el-menu-item-group>
                    <el-menu-item
                        :index="todo.menucode"
                        v-for="(todo, i) in item.list"
                        :key="i"
                        >{{ todo.menuName }}</el-menu-item
                    >
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
        <div class="page-main-right-wrapper">
            <!-- <component :is="activeName" v-if="activeName !== ''"></component> -->
            <transition name="el-fade-in">
                <router-view></router-view>
            </transition>
        </div>
        <publicDialog
            v-if="
                pageTotal > 0 &&
                hasLogin &&
                roleId == 1 &&
                (manageRoleType === 0 ||
                    manageRoleType === 1 ||
                    manageRoleType === 2)
            "
        ></publicDialog>
    </div>
</template>

<script type="text/ecmascript-6">
import publicDialog from '../page_main_components/page_main_8_business/page_24_pos_manage/components/publicDialog'
export default {
    components: {
        publicDialog
    },
    data: function () {
        return {
            pageTotal: 0,
            clickIndex: 0,
            activeName: '',
            menuList: [],
            manageMenu: [
                {
                    menuName: '运营平台',
                    icon: 'icon-2-gray',
                    children: [
                        {
                            childrenKey: 'dataOverview',
                            childrenName: '数据概览'
                        },
                        {
                            childrenKey: 'reconCiliation',
                            childrenName: '对账平台'
                        },
                        {
                            childrenKey: 'saleroomOverview',
                            childrenName: '门店分析'
                        },
                        {
                            childrenKey: 'payReport',
                            childrenName: '支付平台'
                        },
                        {
                            childrenKey: 'message',
                            childrenName: '短信平台'
                        }
                    ]
                },
                {
                    menuName: '商家管理',
                    icon: 'icon-1-gray',
                    children: [
                        {
                            childrenKey: 'k-t-v-manage',
                            childrenName: '商家列表'
                        },
                        {
                            childrenKey: 'yjy-head-shop',
                            childrenName: '娱加云总店'
                        }
                    ]
                },
                {
                    menuName: '人员管理',
                    icon: 'icon-8-gray',
                    children: [
                        {
                            childrenKey: 'password-manage',
                            childrenName: '密码管理'
                        },
                        {
                            childrenKey: 'role-manage',
                            childrenName: '权限管理'
                        }
                    ]
                },
                {
                    menuName: '代理商管理',
                    icon: 'icon-2-gray',
                    children: [
                        {
                            childrenKey: 'store-manage',
                            childrenName: '库存查询'
                        }
                    ]
                },
                {
                    menuName: '管理后台',
                    icon: 'icon-7-gray',
                    children: [
                        {
                            childrenKey: 'apk-manage',
                            childrenName: '终端版本管理'
                        },
                        {
                            childrenKey: 'theme',
                            childrenName: '皮肤包管理'
                        },
                        {
                            childrenKey: 'setting',
                            childrenName: '参数设置'
                        },
                        {
                            childrenKey: 'action-log',
                            childrenName: '操作日志'
                        },
                        {
                            childrenKey: 'report',
                            childrenName: '订单查询'
                        },
                        {
                            childrenKey: 'add',
                            childrenName: '新增商家数'
                        },
                        {
                            childrenKey: 'active',
                            childrenName: '活跃商家数'
                        }
                    ]
                },
                {
                    menuName: '增值服务',
                    icon: 'icon-1-gray',
                    children: [
                        {
                            childrenKey: 'add-service-list',
                            childrenName: '增值服务列表'
                        },
                        {
                            childrenKey: 'add-service-order',
                            childrenName: '增值服务订单'
                        },
                        {
                            childrenKey: 'add-service-pay-order',
                            childrenName: '增值服务支付单'
                        }
                    ]
                }
            ],
            agentMenu: [
                {
                    menuName: '运营平台',
                    icon: 'icon-2-gray',
                    children: [
                        {
                            childrenKey: 'dataOverview',
                            childrenName: '数据概览'
                        },
                        {
                            childrenKey: 'reconCiliation',
                            childrenName: '对账平台'
                        },
                        {
                            childrenKey: 'saleroomOverview',
                            childrenName: '门店分析'
                        },
                        {
                            childrenKey: 'message',
                            childrenName: '短信平台'
                        },
                        {
                            childrenKey: 'payReport',
                            childrenName: '支付平台'
                        }
                    ]
                },
                {
                    menuName: '商家管理',
                    icon: 'icon-1-gray',
                    children: [
                        {
                            childrenKey: 'k-t-v-agent',
                            childrenName: '商家列表'
                        },
                        {
                            childrenKey: 'yjy-head-shop',
                            childrenName: '娱加云总店'
                        }
                    ]
                },
                {
                    menuName: '代理商管理',
                    icon: 'icon-2-gray',
                    children: [
                        {
                            childrenKey: 'store-agent',
                            childrenName: '库存查询'
                        }
                    ]
                },
                {
                    menuName: '管理后台',
                    icon: 'icon-7-gray',
                    children: [
                        {
                            childrenKey: 'apk-agent',
                            childrenName: '终端版本查看'
                        }
                    ]
                }
            ],
            manageMenu1: [
                {
                    menuName: '运营平台',
                    icon: 'icon-2-gray',
                    children: [
                        {
                            childrenKey: 'saleroomOverview',
                            childrenName: '门店分析'
                        },
                        {
                            childrenKey: 'payReport',
                            childrenName: '支付平台'
                        }
                    ]
                },
                {
                    menuName: '商家管理',
                    icon: 'icon-1-gray',
                    children: [
                        {
                            childrenKey: 'k-t-v-manage',
                            childrenName: '商家列表'
                        },
                        {
                            childrenKey: 'yjy-head-shop',
                            childrenName: '娱加云总店'
                        }
                    ]
                },
                {
                    menuName: '代理商管理',
                    icon: 'icon-2-gray',
                    children: [
                        {
                            childrenKey: 'store-manage',
                            childrenName: '库存查询'
                        }
                    ]
                },
                {
                    menuName: '人员管理',
                    icon: 'icon-8-gray',
                    children: [
                        {
                            childrenKey: 'password-manage',
                            childrenName: '密码管理'
                        }
                    ]
                },
                {
                    menuName: '管理后台',
                    icon: 'icon-7-gray',
                    children: [
                        {
                            childrenKey: 'add',
                            childrenName: '新增商家数'
                        },
                        {
                            childrenKey: 'active',
                            childrenName: '活跃商家数'
                        },
                        {
                            childrenKey: 'report',
                            childrenName: '订单查询'
                        }
                    ]
                }
            ],
            FinanceMenu: [
                {
                    menuName: '运营平台',
                    icon: 'icon-2-gray',
                    children: [
                        {
                            childrenKey: 'dataOverview',
                            childrenName: '数据概览'
                        },
                        {
                            childrenKey: 'reconCiliation',
                            childrenName: '对账平台'
                        }
                    ]
                },
                {
                    menuName: '商家管理',
                    icon: 'icon-1-gray',
                    children: [
                        {
                            childrenKey: 'k-t-v-manage',
                            childrenName: '商家列表'
                        },
                        {
                            childrenKey: 'yjy-head-shop',
                            childrenName: '娱加云总店'
                        }
                    ]
                },
                {
                    menuName: '代理商管理',
                    icon: 'icon-2-gray',
                    children: [
                        {
                            childrenKey: 'store-manage',
                            childrenName: '库存查询'
                        }
                    ]
                },
                {
                    menuName: '人员管理',
                    icon: 'icon-8-gray',
                    children: [
                        {
                            childrenKey: 'password-manage',
                            childrenName: '密码管理'
                        }
                    ]
                },
                {
                    menuName: '管理后台',
                    icon: 'icon-7-gray',
                    children: [
                        {
                            childrenKey: 'add',
                            childrenName: '新增商家数'
                        },
                        {
                            childrenKey: 'active',
                            childrenName: '活跃商家数'
                        },
                        {
                            childrenKey: 'report',
                            childrenName: '订单查询'
                        }
                    ]
                }
            ]
        }
    },
    mounted () {
    },
    created () {
        this.getList()
        this.getUserMenu()
        this.getManagementType()
    },
    watch: {
        $route (n) {
            console.log(n)
            this.activeName = n.name
        },
        activeName () {
            if (this.activeName === '商家列表') {
                this.$store.dispatch('setShowRefreshPage', true)
            } else {
                this.$store.dispatch('setShowRefreshPage', false)
                this.$store.dispatch('agentId', '')
            }
            if (this.activeName === '娱加云总店') {
                this.$store.dispatch('setPageHeadShop', 0)
            }
        },
        menuActiveName (val) {
            if (this.menuActiveName !== '') {
                console.log(val, 'menuActiveName')
                this.handleSelect(this.menuActiveName)
            }
        }
    },
    methods: {
        // 获取列表
        async getList () {
            const res = await this.$http.post(this.$store.state.IP + '/borrowDevice/posCheckResult', {
                limit: 10,
                page: 0
            })
            let response = res.data
            if (response.ret === '0') {
                this.pageTotal = response.res.total
            }
        },
        getManagementType () {
            let params = {
                params: {
                }
            }
            this.$http.get(this.$store.state.IP + '/system/company/getManagementType?type=1', params).then(response => {
                response = response.body
                if (response.ret === '0') {
                    console.log(response.data, 'response.dataresponse.data')
                    let arr = []
                    let typeList = response.data.filter(item => item.managementType !== 3)
                    typeList.forEach(item => {
                        arr.push(item.managementType)
                    })
                    this.$store.dispatch('setManageList', typeList)
                    this.$store.dispatch('setAllManageList', response.data)
                    this.$store.dispatch('setManageArr', arr)
                }
            }, response => {
                console.log('获取失败')
            })
        },
        getUserMenu () {
            this.$http.get(this.$store.state.IP + '/systemUserManage/getUserMenu', {
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                response = response.body
                if (response.ret === '0') {
                    this.menuList = response.res.list
                    this.$nextTick(() => {
                        if (this.menuList.length === 0) {
                            this.$message({
                                message: '暂无权限，请联系管理员配置菜单！',
                                type: 'error'
                            })
                            return
                        }
                        // this.handleSelect('headOfficeManage')
                        this.handleSelect(this.menuList[0].list[0].menucode)
                        // todo
                        // this.handleSelect(this.menuList[1].list[2].menucode)
                    })
                }
            }, response => {
                console.log('获取失败')
            })
        },
        handleSelect (key) {
            console.log(key)
            this.$router.push(key)
            this.activeName = key
            this.$store.dispatch('setAP', 0)
        }
    },
    computed: {
        hasLogin () {
            return this.$store.state.hasLogin
        },
        manageRoleType () {
            return this.$store.state.manageRoleType
        },
        roleId () {
            return this.$store.state.roleId
        },
        menuActiveName () {
            return this.$store.state.menuActiveName
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.page-main
    width: 100%
    min-height: calc(100vh - 65px)
    display: flex
    flex-flow: row nowrap
    justify-content: flex-start
    align-content: flex-start
    border-top: 1px solid #f1f0f5

    .page-main-left-tabs
        flex: 0 0 182px
        height: calc(100vh - 65px)
        overflow-y: auto
        overflow-x: hidden
        background: #fff

        .page-main-left-tab
            line-height: 56px
            width: 182px
            height: 56px
            background: #fff
            color: #595959
            font-size: 14px
            cursor: pointer
            position: relative

            .page-main-left-tab-in
                position: absolute
                left: 0
                bottom: 0
                height: 42px
                width: 100%
                line-height: 42px

                &.active
                    background: #e6f7ff
                    color: #409EFF

                &:hover
                    background: #f6f6f6

                .page-main-left-tab-in-padding
                    position: absolute
                    height: 42px
                    width: 3px
                    left: 0
                    top: 0
                    background: #409EFF
                    z-index: 10

    .page-main-mid-line
        flex: 0 0 1px
        min-height: calc(100vh - 65px)
        background: #f1f0f5

    .page-main-other-padding
        flex: 0 0 20px
        min-height: calc(100vh - 65px)
        background: #f1f0f5

    .page-main-right-wrapper
        flex: 1
        overflow-x: hidden
        // min-height: calc(100vh - 65px)
        height: calc(100vh - 65px)
        background: #f1f0f5
        overflow-y: auto
        overflow-x: hidden
        padding: 0 22px
        box-sizing: border-box

.page-main-left-tab-in-icon
    width: 18px
    height: 18px
    display: inline-block
    vertical-align: middle
    background-size: cover

    &.icon-1
        background-image: url('../../common/pic/icons_8_business/icon_1.png')

    &.icon-2
        background-image: url('../../common/pic/icons_8_business/icon_2.png')

    &.icon-3
        background-image: url('../../common/pic/icons_8_business/icon_3.png')

    &.icon-4
        background-image: url('../../common/pic/icons_8_business/icon_4.png')

    &.icon-5
        background-image: url('../../common/pic/icons_8_business/icon_5.png')

    &.icon-6
        background-image: url('../../common/pic/icons_8_business/icon_6.png')

    &.icon-7
        background-image: url('../../common/pic/icons_8_business/icon_7.png')

    &.icon-1-gray
        background-image: url('../../common/pic/icons_8_business/icon_1_gray.png')

    &.icon-2-gray
        background-image: url('../../common/pic/icons_8_business/icon_2_gray.png')

    &.icon-3-gray
        background-image: url('../../common/pic/icons_8_business/icon_3_gray.png')

    &.icon-4-gray
        background-image: url('../../common/pic/icons_8_business/icon_4_gray.png')

    &.icon-5-gray
        background-image: url('../../common/pic/icons_8_business/icon_5_gray.png')

    &.icon-6-gray
        background-image: url('../../common/pic/icons_8_business/icon_6_gray.png')

    &.icon-7-gray
        background-image: url('../../common/pic/icons_8_business/icon_7_gray.png')

    &.icon-8-gray
        background-image: url('../../common/pic/icons_8_business/icon_8_gray.png')

    &.userManage
        background-image: url('../../common/pic/login_name.png')

.leftMenu
    .el-menu-item:hover
        border-left: none
        background: #d1e3f6

    // 设置选中el-menu-item时的样式
    .el-menu-item.is-active
        border-left: none
        background: #d1e3f6
</style>
